<template>
	<!-- 打卡日历页面 -->
	<view>
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="日历签到" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="bar">
			<!-- 上一个月 -->
			<view class="previous" @click="handleCalendar(0)">
				<button class="barbtn" v-if="langType=='ch'">上一月</button>
				<button class="barbtn" v-else>Last</button>
			</view>
			<!-- 显示年月 -->
			<view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
			<!-- 下一个月 -->
			<view class="next" @click="handleCalendar(1)">
				<button class="barbtn" v-if="langType=='ch'">下一月</button>
				<button class="barbtn" v-else>Next</button>
			</view>
		</view>
		<!-- 显示星期 -->
		<view class="week" v-if="langType=='ch'">
			<view v-for="(item,index) in weeks_ch" :key="index">{{item}}</view>
		</view>
		<view class="week" v-else>
			<view v-for="(item,index) in weeks_en" :key="index">{{item}}</view>
		</view>
		<view class="myDateTable">
			<view v-for="(item,j) in days" :key="j" class='dateCell'>
				<view v-if="item.date==undefined||item.date == null" class='cell'>
					<text :decode="true">&nbsp;&nbsp;</text>
				</view>
				<view v-else>
					<!-- 已签到日期 -->
					<view v-if="item.isSign == true" class='cell greenColor bgWhite  '>
						<text>{{item.date}}</text>
					</view>
					<!-- 漏签 -->
					<view @click="clickSignUp(item.date,0)" class="cell redColor bgGray"
						v-else-if="cur_year<toYear||(cur_year==toYear&&cur_month<toMonth)||(cur_year==toYear&&cur_month==toMonth&&item.date<today)">
						<!-- 小程序不兼容这个 v-else-if="(new Date(cur_year+'-'+cur_month+'-'+item.date))<(new Date())"> -->
						<text>{{item.date}}</text>
					</view>
					<!-- 今日未签到-->
					<view @click="clickSignUp(item.date,1)" class="cell coreshop-text-white bgBlue"
						v-else-if="item.date==today&&cur_month==toMonth&&cur_year==toYear">
						<text>签到</text>
					</view>
					<!-- 当前日期之后 -->
					<view class="coreshop-text-white cell" v-else>
						<text>{{item.date}}</text>
					</view>
				</view>

			</view>
		</view>
		<!--<view class="TipArea ">
            坚持签到<view class="impTip">可获得积分和余额</view>
        </view>-->

		<view class='count'>
			<text>截至目前，已坚持打卡</text>
			<view class='daynumber'>
				<text class='number'>{{sumCount}}</text>
				<text class='day'>天</text>
			</view>

			<view>本月累积打卡<text class="monthSum">{{dataSource.length}}</text>天</view>
			<text>请再接再厉，继续努力!</text>
		</view>

		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				days: [],
				SignUp: [],
				cur_year: 0, //当前选的年
				cur_month: 0, //当前选的月
				today: parseInt(new Date().getDate()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				toYear: parseInt(new Date().getFullYear()), //本年
				weeks_ch: ['日', '一', '二', '三', '四', '五', '六'],
				weeks_en: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'],
				dataSource: [], //已签到的数据源
				langType: 'ch', //只是示例一个翻译而已，要想所有都翻译自己可以再加加
				sumCount: 0,
				signData: []
			};
		},
		onLoad() {
			var checkInIsOpen = this.$store.state.config.checkInIsOpen;
			if (checkInIsOpen == 2) {
				console.log('签到功能未开启');
				this.$refs.uToast.show({
					message: "签到功能未开启",
					type: 'error',
					complete: function() {
						uni.navigateBack({
							delta: 1
						});
					}
				});
			} else {
				this.getUserCheckByMonth(this.cur_year, this.cur_month);
				this.getUserCheckCount();
			}
		},
		created() {
			this.cur_year = new Date().getFullYear();
			this.cur_month = new Date().getMonth() + 1;
			this.SignUp = this.dataSource;

			this.calculateEmptyGrids(this.cur_year, this.cur_month);
			this.calculateDays(this.cur_year, this.cur_month);
			this.onJudgeSign();
		},
		watch: {
			dataSource: 'onResChange',
		},
		computed: {
			...mapState({
				hasLogin: state => state.hasLogin,
				userInfo: state => state.userInfo,
			}),

		},
		methods: {
			getUserCheckCount() {
				this.$u.api.getUserCheckCount().then(res => {
					console.log(res);
					if (res.status) {
						this.sumCount = res.data;
					} else {
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							back: false
						})
					}
				});
			},
			getUserCheckByMonth(cur_year, cur_month) {
				this.$refs.uToast.show({
					loading: false,
					type: 'loading',
					title: '正在加载',
					message: "正在加载",
					duration: 1000
				})
				this.$u.api.getUserCheckByMonth({
					year: cur_year,
					month: cur_month,
				}).then(res => {
					console.log(res);
					if (res.status) {
						this.dataSource = res.data;
					} else {
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							back: false
						})
					}
				});
			},
			goLogin() {
				this.$store.commit('showLoginTip', true);
			},
			// 获取当月共多少天
			getThisMonthDays(year, month) {
				return new Date(year, month, 0).getDate()
			},
			// 获取当月第一天星期几
			getFirstDayOfWeek(year, month) {
				return new Date(Date.UTC(year, month - 1, 1)).getDay();
			},
			// 计算当月1号前空了几个格子，把它填充在days数组的前面
			calculateEmptyGrids(year, month) {
				//计算每个月时要清零
				this.days = [];
				const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
				if (firstDayOfWeek > 0) {
					for (let i = 0; i < firstDayOfWeek; i++) {
						var obj = {
							date: null,
							isSign: false
						}
						this.days.push(obj);
					}
				}
			},
			// 绘制当月天数占的格子，并把它放到days数组中
			calculateDays(year, month) {
				const thisMonthDays = this.getThisMonthDays(year, month);
				// this.columnsLen=Math.ceil(thisMonthDays/7);
				// console.log(this.columnsLen);
				for (let i = 1; i <= thisMonthDays; i++) {
					var obj = {
						date: i,
						isSign: false
					}
					this.days.push(obj);
				}
				//console.log(this.days);
			},
			onResChange(newD, oldD) {
				this.SignUp = newD;
				this.onJudgeSign();
			},
			//匹配判断当月与当月哪些日子签到打卡
			onJudgeSign() {
				var signs = this.SignUp;
				var daysArr = this.days;
				for (var i = 0; i < signs.length; i++) {
					var current = new Date(signs[i].replace(/-/g, "/"));
					var year = current.getFullYear();
					var month = current.getMonth() + 1;
					var day = current.getDate();
					day = parseInt(day);
					for (var j = 0; j < daysArr.length; j++) {
						//年月日相同则打卡成功
						if (year == this.cur_year && month == this.cur_month && daysArr[j].date ==
							day) { //&& signs[i].isSign == "今日已打卡"
							// console.log(daysArr[j].date, day);
							daysArr[j].isSign = true;
						}
					}
				}
				this.days = daysArr;
			},
			// 切换控制年月，上一个月，下一个月
			handleCalendar(type) {
				const cur_year = parseInt(this.cur_year);
				const cur_month = parseInt(this.cur_month);
				var newMonth;
				var newYear = cur_year;
				if (type === 0) { //上个月
					newMonth = cur_month - 1;
					if (newMonth < 1) {
						newYear = cur_year - 1;
						newMonth = 12;
					}
				} else {
					newMonth = cur_month + 1;
					if (newMonth > 12) {
						newYear = cur_year + 1;
						newMonth = 1;
					}
				}
				this.calculateEmptyGrids(newYear, newMonth);
				this.calculateDays(newYear, newMonth);

				this.cur_year = newYear;
				this.cur_month = newMonth;

				this.SignUp = []; //先清空

				this.getUserCheckByMonth(this.cur_year, this.cur_month);

				//this.$emit('dateChange', this.cur_year + "-" + this.cur_month); //传给调用模板页面去拿新数据
			},
			clickSignUp(date, type) { //type=0补签，type=1当日签到
				var _this = this;
				if (!this.hasLogin) {
					this.$store.commit('showLoginTip', true);
					return false;
				} else {
					//如果不需要补签功能直接在这阻止不执行后面的代码就行。
					if (type == 0) {
						return false;
					}
					var postDate = this.cur_year + "-" + this.cur_month + "-" + date;
					this.$u.api.userCheckIn({
						date: postDate,
					}).then(res => {
						console.log(res);
						if (res.status) {
							uni.showToast({
								title: "签到成功",
								icon: 'success',
								duration: 2000
							});
							//this.SignUp.push(this.cur_year + "-" + this.cur_month + "-" + date);
							_this.dataSource.push(this.cur_year + "-" + this.cur_month + "-" + date);
							console.log(_this.dataSource);
							//_this.SignUp = _this.dataSource;
							if (res.data) {
								_this.sumCount = res.data.cumulativeCheckInCount;
							}

							_this.onJudgeSign();
						} else {
							this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
								back: false
							})
						}
					});
					this.$forceUpdate();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "checkIn.scss";
</style>